<template>
	  <view class="template-group">
	

		   
		   



    <view class="" v-if="type==2">
      <view class="" style="padding: 30rpx 20rpx;" >
        <tn-waterfall ref="waterfall" v-model="list" >
          <template v-slot:left="{ leftList }">
            <view v-for="(item, index) in leftList" :key="item.id" class="product__item" @click="dakai(item.id)">
              <view class="item__image" style="position: relative">
				
				  
				  
                <tn-lazy-load v-if="item.vod" :threshold="-450" height="100%" :image="item.vod_img" :index="item.id" imgMode="widthFix">
					
				</tn-lazy-load>				
				
				<tn-lazy-load v-else :threshold="-450" height="100%" :image="item.mainImage[0]" :index="item.id" imgMode="widthFix">
					
				</tn-lazy-load>
				
       <view class="video-img tn-flex"
       	style="position: absolute;border-radius: 2500px;background-color: rgb(13, 13, 13,0.3);top: 40%;left:30%;width: 40px;height: 40px;"
       >
       	<view class="tn-icon-play-fill tn-color-white"
       		style="font-size: 30px;margin-left: 6px;margin-top:4px;"></view>
       </view>
			  </view>
              <view class="item__data">
                <view class="item__title-container">
                  <!-- <view v-if="item.newProduct" class="item__store-type tn-bg-gray--light">标签</view>
                  <view v-else-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-1">SVIP</view> -->
                  <text class="item__title tn-color-cat">{{ item.title }}</text>
                </view>            
    
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
                  <view class="justify-content-item">
                    <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                      <view class="logo-pic">
                        <view class="logo-image">
							<tn-avatar class="" shape="circle" :src="item.userAvatar" size="sm">
							</tn-avatar>
                        
                        </view>
                      </view>
                      <view class="tn-padding-left-xs">
                        <text class="tn-color-gray tn-text-sm">{{ item.userName }}</text>
                      </view>
                
                    </view>
                  </view>
                  <view class="justify-content-item">
                    <text class="tn-icon-praise-fill tn-color-gray tn-padding-right-xs"></text>
                    <text class="tn-color-gray">{{ $t.number.formatNumberAddPriceUnit(item.likeCount) }}</text>
                  </view>
                </view>
                
                
              </view>
            </view>
          </template>
          <template v-slot:right="{ rightList }">
            <view v-for="(item, index) in rightList" :key="item.id" class="product__item" @click="dakai(item.id)">
             <view class="item__image" style="position: relative">
             			
             				  
                      <tn-lazy-load v-if="item.vod" :threshold="-450" height="100%" :image="item.vod_img" :index="item.id" imgMode="widthFix">
             					
             				</tn-lazy-load>				
             				
             				<tn-lazy-load v-else :threshold="-450" height="100%" :image="item.mainImage[0]" :index="item.id" imgMode="widthFix">
             					
             				</tn-lazy-load>
             				
             <view class="video-img tn-flex"
             	style="position: absolute;border-radius: 2500px;background-color: rgb(13, 13, 13,0.3);top: 40%;left:40%;width: 40px;height: 40px;"
             	>
             	<view class="tn-icon-play-fill tn-color-white"
             		style="font-size: 30px;margin-left: 6px;margin-top:4px;"></view>
             </view>
             			  </view>
              <view class="item__data">
                <view class="item__title-container">
                  <!-- <view v-if="item.storeType === 1" class="item__store-type tn-cool-bg-color-5">VIP</view> -->
                  <text class="item__title tn-color-cat">{{ item.title }}</text>
                </view>
                           
                <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs">
                  <view class="justify-content-item">
                    <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                      <view class="logo-pic">
                        <view class="logo-image">
                        <tn-avatar class="" shape="circle" :src="item.userAvatar" size="sm">
                        </tn-avatar>
                                                
                        </view>
                      </view>
                      <view class="tn-padding-left-xs">
                        <text class="tn-color-gray tn-text-sm">{{ item.userName }}</text>
                      </view>
                
                    </view>
                  </view>
                  <view class="justify-content-item">
                    <text class="tn-icon-praise-fill tn-color-gray tn-padding-right-xs"></text>
                    <text class="tn-color-gray">{{ $t.number.formatNumberAddPriceUnit(item.likeCount) }}</text>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </tn-waterfall>
      </view>
    
    </view>





	</view>
</template>

<script>
	const audioContext = uni.createInnerAudioContext()

	export default {
		props: ['list', 'type'],
	
		data() {
			return {
				noClick: true,
				videoPlay: false,
				isplay: false,
				body:''
			}
		},
		created() {
		
		},
		methods: {

			screenChange(e) {
				let _this = this;
				let fullScreen = e.detail.fullScreen;
				if (!fullScreen) {
					//_this.videoContext.pause();
					//_this.videoPlay = false;
				}
			},
			videoShow(vod) {
				uni.navigateTo({
					url: '/homePages/vodplay?vodurl=' + vod
				})
			},



			dakai(id) {
				if (this.isplay) {
					audioContext.stop()
					this.isplay = false
					return
				}
				uni.navigateTo({
					url: '/circlePages/details?id=' + id
				});
			},

			shipin(vod) {
				this.videoPlay = true
				//this.$emit('bofang', vod)
			},

			chaozuo(item) {
				let that = this
				if (!uni.getStorageSync('token')) {
					that.msg('请登陆')
				}
				let list = []
				if (item.ziji == 1 && uni.getStorageSync('token')) {
					list = ['删除帖子'];
				}
				if (item.manage == 1) {
					list = ['删除帖子', '推荐贴子', '置顶帖子'];
				}
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						if (res.tapIndex == 0) {
							that.edieGoods(item.id, 1)
						}
						if (res.tapIndex == 1) {
							that.edieGoods(item.id, 2)
						}

						if (res.tapIndex == 2) {
							that.edieGoods(item.id, 3)
						}


					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});


			},

			async edieGoods(id, type) {
				console.log(3)
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/api/user/edieGoods',
					data: {
						id: id,
						type: type
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.msg(result.data.msg)

						if (type == 1) {
							const shaya = {
								id: id,
								msg: '删除'
							}
							uni.$emit('onlist_change', shaya)
						}



					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});

					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},



			selectAddressFn(body) {
				if (body.lng) {
					uni.openLocation({
						longitude: Number(body.lng),
						latitude: Number(body.lat),
						name: '发布位置',
						address: body.address
					})
				} else {
					this.msg('未标注地图')
				}
			},



			dianzantiezi(item) {
				
				
				let that = this;
				if (that.noClick) {
				    // 第一次点击
				    that.noClick= false;	
					console.log('点击',that.noClick)
				     that.dianzantiezi_pass(item);				  
				    setTimeout(()=> {
				        that.noClick= true;
				    }, 2000)
				} else {
					console.log('重复',that.noClick)
				    // 这里是重复点击的判断
				}
				
				
				
				
			},

			tiezi(){
				console.log(333)
			},

			async dianzantiezi_pass(item) {
				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}
				let result = await this.flowgoods(item.id)

				const shaya = {
					id: item.id,
					msg: result.msg
				}

				uni.$emit('onlist_change', shaya)
				this.msg(result.msg)
			},


			bofang(vocurl) {
				if (this.isplay) {
					audioContext.stop()
					this.isplay = false
					return
				}
				this.isplay = !this.isplay;
				let that = this
				audioContext.src = vocurl
				audioContext.play()
				audioContext.onPlay(() => {})
				audioContext.onEnded(() => {
					this.isplay = false
				})
				audioContext.onError(() => {
					this.isplay = false
					that.msg('不支持播放该音频格式')
				})
			},




		}
	};
</script>


<style scoped lang="scss">
	.xunzhang {
		width: 20px;
	}

	.blogger__desc__label--prefix {
		color: #00FFC8;
		padding-right: 5px;
	}

	.blogger__desc__label {
		height: 24px;
		padding: 4px 6px;
		margin: 5px 9px 0 0;
	}

	.blogger__item {
		padding: 15px;
	}

	.blogger__main-image--2 {
		max-width: 130px;
		max-height: 130px;
	}

	.blogger__main-image--3 {
		height: 106px;
		width: 100%;
	}

	.blogger__main-image {
		border-radius: 8px;
	}

	.blogger__main-image--1 {
		max-width: 80%;
		max-height: 150px;
	}
	
	/* 资讯主图 start*/

	
	.image-pic {
	  background-size: cover;
	  background-repeat: no-repeat;
	  // background-attachment:fixed;
	  background-position: top;
	  border-radius: 10rpx;
	}
	
	.article-shadow {
	  border-radius: 15rpx;
	  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}
	
	/* 文字截取*/
	.clamp-text-1 {
	  -webkit-line-clamp: 1;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	
	.clamp-text-2 {
	  -webkit-line-clamp: 2;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	.clamp-text-3 {
	  -webkit-line-clamp: 3;
	  display: -webkit-box;
	  -webkit-box-orient: vertical;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	/* 标签内容 start*/
	.tn-tag-content {
	  &__item {
	    display: inline-block;
	    line-height: 35rpx;
	    padding: 5rpx 25rpx;
	
	    &--prefix {
	      padding-right: 10rpx;
	    }
	  }
	}


  /* 文章内容 start*/
  .tn-blogger-content {
    &__wrap {
      margin:10rpx 10rpx;
    }
    
    &__info {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__label {
      &__item {
        color: #1D2541;
        background-color: #F3F2F7;
        border-radius: 10rpx;
        font-size: 22rpx;
        
        padding: 5rpx 15rpx;
        margin: 5rpx 0 0 18rpx;
        
        &--prefix {
          font-size: 24rpx;
          color: #1D2541;
          padding-right: 10rpx;
        }
      }
      
      &__desc {
        line-height: 55rpx;
      }
    }
    
    &__main-image {
      border: 1rpx solid #F8F7F8;
      border-radius: 16rpx;
      
      &--1 {
        max-width: 690rpx;
        min-width: 690rpx;
        max-height: 400rpx;
        min-height: 400rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 212rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 40rpx;
      padding-right: 5rpx;
    }
  }
  
  
  
  /* 瀑布流*/
  .product__item {
    background-color: #FFFFFF;
    overflow: hidden;
    margin: 0 10rpx;
    margin-bottom: 40rpx;
    // box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    
    .item {
      /* 图片 start */
      &__image {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        border: 1rpx solid #F8F7F8;
        border-radius: 10rpx;
        overflow: hidden;
      }
      /* 图片 end */
      
      /* 内容 start */
      &__data {
        padding: 14rpx 0rpx;
      }
      
      /* 标题 start */
      &__title-container {
        text-align: justify;
        line-height: 38rpx;
        vertical-align: middle;
      }
      &__store-type {
        height: 28rpx;
        font-size: 20rpx;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4rpx;
        border-radius: 6rpx;
        white-space: nowrap;
        text-align: center;
        top: -2rpx;
        margin-right: 6rpx;
      }
      &__title {
        font-size: 30rpx;
      }
      /* 标题 end */
      
      /* 标签 start */
      &__tags-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
      }
      &__tag {
        margin: 10rpx;
        color: #7C8191;
        background-color: #F3F2F7;
        padding: 4rpx 14rpx 6rpx;
        border-radius: 10rpx;
        font-size: 20rpx;
        
        &:first-child {
          margin-left: 0rpx !important;
        }
      }
      /* 标签 end */
      
      /* 价格 start */
      &__price-container {
        font-size: 24rpx;
        color: #E83A30;
        font-weight: bold;
      }
      &__price {
        &--unit {
          
        }
        &--integer {
          font-size: 38rpx;
        }
        &--decimal {
          
        }
      }
      /* 价格 end */
      /* 内容 end */
    }
  }
  .image-book{
    padding: 150rpx 0rpx;
    font-size: 16rpx;
    font-weight: 300;
    position: relative;
  }
  .image-picbook{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 15rpx 15rpx 0 0;
  }
  
</style>
